<template>
  <div class="team">
    <div class="topimg">
    <img src="../assets/house/teamtop.jpg" alt="">
    </div>
    <div class="customized">
      <h1>团建定制</h1>
      <p>为更好的了解您的旅行计划，为您提供完美的定制服务，请完善以下资料</p>
      <div class="form">
      <div>
        <div>
         <p>请输入您的姓名：</p><el-input placeholder="您的姓名" v-model="name"><i slot="suffix" class="el-input__icon el-icon-user"></i></el-input>
        </div>
        <div>
        <p>请输入您的手机号 ：</p><el-input placeholder="您的手机号" v-model="pnumber"><i slot="suffix" class="el-input__icon el-icon-phone-outline"></i></el-input>
        </div>
        <div>
         <p>请输入团建地点：</p><el-input placeholder="团建地点" v-model="teamdd"><i slot="suffix" class="el-input__icon el-icon-location-outline"></i></el-input>
        </div>
        <div>
         <p>请输入行程天数：</p><el-input placeholder="行程天数" v-model="days"><i slot="suffix" class="el-input__icon el-icon-time"></i></el-input>
        </div>
        <div>
         <p>请输入人数：</p><el-input placeholder="人数" v-model="people"><i slot="suffix" class="el-input__icon el-icon-hot-water"></i></el-input>
        </div>
         <el-button type="success" round icon="el-icon-document-remove"  @click="open">提交定制</el-button>
      </div>
      <div>
        <img src="../assets/house/QR.jpg" alt="">
        <p>扫码关注公众微信号</p>
      </div>
      </div>
    </div>
    <div class="programme">
      <h1>专属定制方案</h1>
      <div class="programmes">
        <div class="progitem" v-for="(item,i) of programmes" :key="i">
          <router-link :to="`teamdetail/${item.id}`">
          <div>
            <img :src="item.img" alt="">
          </div>  
          <p>{{item.team_name}}</p>
          <p>目的地：{{item.destination}}</p>
          <p>行程天数：{{item.day}}天 
            <span>浏览数：{{item. browse}}</span>
          </p>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      name:"",
      pnumber:"",
      teamdd:"",
      days:"",
      people:"",
      programmes:{}
    }
  },
  methods:{
    open(){
        this.$message({
          message: '提交成功，我们将会受理你的团建定制，请等候通知',
          type: 'success',
        });
        this.name="";
        this.pnumber="";
        this.teamdd="";
        this.days="";
        this.days="";
        this.people="";
    }
  },
  mounted(){
    this.axios.get("team").then(result=>{
     for(let i in result.data.results){
       if(result.data.results[i].img){
         result.data.results[i].img=require(`../assets/house/${result.data.results[i].img}.jpg`)
       }
     }
      this.programmes=result.data.results;
    })
  }
}
</script>

<style>
  .team .topimg img{
    width: 100%;
  }
  .team h1{
    font-size: 35px;
    text-align: center; 
  }
  .team .customized{
    padding: 5%;
    width: 60%;
    background: floralwhite;
    margin: 0 auto;
    margin-top: 2%; 
    margin-bottom: 2%; 
  } 
  .team .customized .form{
    display: flex;
    justify-content: center;
  }
  .team .customized .el-input{
    width: 350px;
  }
  .team .customized p{
    color: #999;
    font-size: 12px;
    text-align: center;
    padding: 3%;
  }
  .team .customized .form>div:first-child{
    color: #999;
  }

  .team .customized .form>div:first-child input{
    margin-top: 5px; 
  }
  .team .customized .form>div:last-child {
    width: 300px;
    height: 300px; 
    margin: 70px; 
  }
  .team .customized .form>div:last-child>img{
    width: 100%;
    height: 100%;
  }
  .team .form>div>div>p{
    text-align: left;
  }
  .team .customized .el-button{
    margin-top: 15px;
    margin-left: 30px;
  }
  .team .programme p{
    color: #999;
    font-size: 15px;
    padding:5px 0;
  }
  .team .programmes{
    display: flex;
    justify-content: center;
    margin:3% auto; 
    width: 75%;
    perspective: 3000px;
    
  }
  .team .programmes .progitem +.progitem{
      margin-left: -10rem;
  }
  .team .progitem p:nth-child(2){
    color:#666;
    font-size: 16px; 
    margin-bottom: 1%; 
  }
  .team .progitem span{
    margin-left: 5%; 
  }
  .team .progitem{
     width: 286px;
     cursor: pointer;
     transition: all 0.2s ease;
     box-shadow: 0px 0px 15px #2b2b2b30;
     z-index: 1;
     transform: rotateY(50deg);
     background: white;
  }
  
  .team .progitem:hover{
    transform: translateY(-1rem);
    box-shadow: 0px 0px 25px black;
    z-index: 2;
  }
  .team .progitem:hover ~ .progitem{
    transform: translateX(4rem);
  }
</style>
